<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- 移动端设置 -->
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minium-scale=1.0">
        <title>京东首页</title>
        <link rel="stylesheet" href="css/base.css">
        <link rel="stylesheet" href="css/index.css">
    </head>
    <body>
        <div class="layout">
            <!-- 搜索块 -->
            <div class="search">
                <a href="demo/test.html" class="logo"></a>
                <form action="" class="searchBox">
                    <input type="text" placeholder="请输入商品名称">
                </form>
                <a href="demo/test.html" class="login">登录</a>
            </div>
            <!-- 轮播图 -->
            <div class="banner">
                <!-- 图片 -->
                <ul class="bannerImg clearfix">
                    <li>
                        <a href="demo/test.html">
                            <img src="img/l1.jpg" alt="5s后即将爆炸">
                        </a>
                    </li>
                    <li>
                        <a href="demo/test.html">
                            <img src="img/l2.jpg" alt="5s后即将爆炸">
                        </a>
                    </li>
                    <li>
                        <a href="demo/test.html">
                            <img src="img/l3.jpg" alt="5s后即将爆炸">
                        </a>
                    </li>
                    <li>
                        <a href="demo/test.html">
                            <img src="img/l4.jpg" alt="5s后即将爆炸">
                        </a>
                    </li>
                    <li>
                        <a href="demo/test.html">
                            <img src="img/l5.jpg" alt="5s后即将爆炸">
                        </a>
                    </li>
                    <li>
                        <a href="demo/test.html">
                            <img src="img/l6.jpg" alt="5s后即将爆炸">
                        </a>
                    </li>
                    <li>
                        <a href="demo/test.html">
                            <img src="img/l7.jpg" alt="5s后即将爆炸">
                        </a>
                    </li>
                    <li>
                        <a href="demo/test.html">
                            <img src="img/l8.jpg" alt="5s后即将爆炸">
                        </a>
                    </li>
                </ul>
                <!-- 点标记 -->
                <ul class="bannerIndicator">
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <!-- 导航块 -->
            <div class="nav">
                <ul class="clearfix">
                    <li>
                        <a href="demo/test.html">
                            <img src="img/nav_1.png" alt="5s后即将爆炸">
                            <p>商品分类</p>
                        </a>
                    </li>
                    <li>
                        <a href="demo/test.html">
                            <img src="img/nav_2.png" alt="5s后即将爆炸">
                            <p>商品分类</p>
                        </a>
                    </li>
                    <li>
                        <a href="demo/test.html">
                            <img src="img/nav_3.png" alt="5s后即将爆炸">
                            <p>商品分类</p>
                        </a>
                    </li>
                    <li>
                        <a href="demo/test.html">
                            <img src="img/nav_4.png" alt="5s后即将爆炸">
                            <p>商品分类</p>
                        </a>
                    </li>
                    <li>
                        <a href="demo/test.html">
                            <img src="img/nav_5.png" alt="5s后即将爆炸">
                            <p>商品分类</p>
                        </a>
                    </li>
                    <li>
                        <a href="demo/test.html">
                            <img src="img/nav_6.png" alt="5s后即将爆炸">
                            <p>商品分类</p>
                        </a>
                    </li>
                    <li>
                        <a href="demo/test.html">
                            <img src="img/nav_7.png" alt="5s后即将爆炸">
                            <p>商品分类</p>
                        </a>
                    </li>
                    <li>
                        <a href="demo/test.html">
                            <img src="img/nav_8.png" alt="5s后即将爆炸">
                            <p>商品分类</p>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 产品块 -->
            <div class="product">
                <div class="productBox clearfix ms">
                    <div class="productTip">
                        <div class="ms_left f_left">
                            <span class="ms_icon f_left m_left"></span>
                            <span class="ms_text f_left m_left">掌上秒杀</span>
                            <div class="ms_time f_left m_left">
                                <span>0</span>
                                <span>0</span>
                                <span>:</span>
                                <span>0</span>
                                <span>0</span>
                                <span>:</span>
                                <span>0</span>
                                <span>0</span>
                            </div>
                        </div>
                        <div class="ms_right f_right m_right">更多秒杀…</div>
                    </div>
                    <div class="content clearfix">
                        <ul>
                            <li>
                                <a href="demo/test.html">
                                    <img src="img/detail01.jpg"  alt="5s后即将爆炸">
                                </a>
                                <p>&yen;50.00</p>
                                <del>&yen;200.00</del>
                            </li>
                            <li>
                                <a href="demo/test.html">
                                    <img src="img/detail02.jpg"  alt="5s后即将爆炸">
                                </a>
                                <p>&yen;1000.00</p>
                                <del>&yen;5000.00</del>
                            </li>
                            <li>
                                <a href="demo/test.html">
                                    <img src="img/detail03.jpg"  alt="5s后即将爆炸">
                                </a>
                                <p>&yen;3000.00</p>
                                <del>&yen;8000.00</del>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="productBox">
                    <div class="productTip">
                        <h3>京东超市</h3>
                    </div>
                    <div class="productContent clearfix">
                        <a href="demo/test.html" class="f_left">
                            <img src="img/cp1.jpg" alt="5s后即将爆炸">
                        </a>
                        <a href="demo/test.html" class="f_left b_bottom b_left">
                            <img src="img/cp2.jpg" alt="5s后即将爆炸">
                        </a>
                        <a href="demo/test.html" class="f_left b_left">
                            <img src="img/cp3.jpg" alt="5s后即将爆炸">
                        </a>
                    </div>
                </div>
                <div class="productBox">
                    <div class="productTip">
                        <h3>京东超市</h3>
                    </div>
                    <div class="productContent clearfix">
                        <a href="demo/test.html" class="f_right">
                            <img src="img/cp4.jpg" alt="5s后即将爆炸">
                        </a>
                        <a href="demo/test.html" class="f_left b_bottom b_right">
                            <img src="img/cp5.jpg" alt="5s后即将爆炸">
                        </a>
                        <a href="demo/test.html" class="f_left b_right">
                            <img src="img/cp6.jpg" alt="5s后即将爆炸">
                        </a>
                    </div>
                </div>
            </div>
            <!-- 底部导航 -->
            <div class="base">
                    <a href="demo/test.html" class="index"></a>
                    <a href="demo/test.html" class="sort"></a>
                    <a href="demo/test.html" class="cart"></a>
                    <a href="demo/test.html" class="center"></a>
            </div>
        </div>
        <script src="js/index.js"></script>
    </body>
</html>